<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form ref="form" label-width="70px" :rules="rules" :model="ruleForm">
          <el-form-item label="属性名" prop="name">
            <el-input style="width: 200px" v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-form>
        <el-button
          type="primary"
          icon="el-icon-plus"
          :disabled="!ruleForm.name"
          @click="addVirtue"
          >添加属性值</el-button
        >
      </div>
      <!-- 表格 -->
      <el-table :data="tableList" height="250" border style="width: 100%">
        <el-table-column label="序号" width="50" prop="index" type="index">
        </el-table-column>
        <el-table-column label="属性值名称" prop="attrValueName" width="600px">
          <template v-slot="{ row, $index }">
            <!-- 输入框 -->
            <el-input
              :ref="$index"
              v-model="content"
              size="mini"
              v-show="row.isShow"
              @blur="addListBlur($index)"
            ></el-input>
            <!-- 展示框 -->
            <p
              style="margin: 0; width: 550px; height: 24px"
              v-show="!row.isShow"
              @click="addListClick($index)"
            >
              {{ row.attrValueName }}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row, $index }">
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="deleteOne($index)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-button type="primary" @click="addAttr">确定</el-button>
      <el-button @click="recall">取消</el-button>
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { addNewAttr } from "@/api/attr";

export default {
  name: "AddList",
  data() {
    return {
      //输入框内容
      content: "",
      //表格展示内容
      tableList: [],
      attrId: "",
      ruleForm: {
        name: "",
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
    };
  },
  //挂载获取数据
  mounted() {
    //数据传递成功 (还没确定接口 修改还没写)
    if (this.$revise.newData) {
      this.tableList = this.$revise.newData.array;
      this.ruleForm.name = this.$revise.newData.attrName;
      this.attrId = this.$revise.newData.attrId;
    }
  },
  computed: {
    ...mapState("cartgory", ["cartGory3Id"]),
  },
  methods: {
    //添加属性
    addVirtue() {
      this.tableList.push({
        attrValueName: "",
        isShow: true,
      });
      this.$nextTick(() => {
        this.$refs[this.tableList.length - 1].focus();
      });
    },
    //失焦
    addListBlur(index) {
      if (!this.content) {
        this.tableList.splice(index, 1);
        return;
      }
      this.tableList[index].isShow = false;
      this.tableList[index].attrValueName = this.content;
      this.content = "";
    },
    //点击聚焦
    addListClick(index) {
      this.tableList[index].isShow = true;
      this.content = this.tableList[index].attrValueName;
      this.$nextTick(() => {
        this.$refs[index].focus();
      });
    },
    //删除
    deleteOne(index) {
      this.tableList.splice(index, 1);
    },
    //确认添加
    async addAttr() {
      let { ruleForm, tableList, cartGory3Id } = this;
      let newList = tableList.map((item) => {
        let obj = {
          valueName: item.attrValueName,
        };
        return obj;
      });
      let obj = {
        attrName: ruleForm.name,
        attrValueList: newList,
        categoryId: cartGory3Id,
        categoryLevel: 3,
      };
      //如果是修改判断$newData有没有值选择给obj 添加一个id
      let text = this.attrId ? "修改" : "添加";
      if (this.attrId) {
        obj.id = this.attrId;
      }
      //添加或修改
      await addNewAttr(obj)
        .then(() => {
          this.$message({
            message: `${text}成功`,
            type: "success",
          });
        })
        .catch(() => {
          this.$message.error(`${text}失败`);
        });
      //将定义的状态全部清空避免下次进来有内容
      this.tableList = [];
      this.ruleForm.name = "";
      this.attrId = "";
      this.$emit("update:visible", false);
      //到这上面都是添加的内容
      this.$revise.newData = null;
    },
    //取消添加/或修改
    recall() {
      this.tableList = [];
      this.ruleForm.name = "";
      this.attrId = "";
      this.$emit("update:visible", false);
      this.$revise.newData = null;
    },
  },
};
</script>

<style scoped>
.box-card {
  margin: 10px;
}
</style>